<template>
  <div>
    <mytop :title="title" />
    <div class="warp">
      <img class="logo" src />
      <van-form @submit="onSubmit">
        <van-field
          v-model="userInfo.username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[
          { required: true, message: '请填写用户名' },
          /*{
            validate:(value)=>{
            return value==='你好世界'
          },
           message :'必须填写你好世界'
          },*/
          {
            pattern:/[a-z]{3,6}/,
            message:'只能输入3-6位小写字母'
          }
          ]"
        />
        <van-field
          v-model="userInfo.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import mytop from 'components/My-Top'
export default {
  data () {
    return {
      title: '登录中心',
      userInfo: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    onSubmit (values) {
      // console.log('submit', values)
      setTimeout(() => {
        const userInfo = {
          name: 'amin',
          headpic: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=tupian&step_word=&hs=0&pn=6&spn=0&di=199430&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=1091405991%2C859863778&os=1114394393%2C554371559&simid=3296715954%2C119998854&adpicid=0&lpn=0&ln=1343&fr=&fmq=1608863856948_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fa1.att.hudong.com%2F62%2F02%2F01300542526392139955025309984.jpg%26refer%3Dhttp%3A%2F%2Fa1.att.hudong.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1611455861%26t%3D29042aaab16614940b8c4d94ddb095ff&fromurl=ippr_z2C%24qAzdH3FAzdH3Fp7rtwg_z%26e3Bkwthj_z%26e3Bv54AzdH3Ftrw1AzdH3Fw8_md_ad_a8naac9dcdmnld8nllccadcnallb9_3r2_z%26e3Bip4s&gsm=3&rpstart=0&rpnum=0&islist=&querylist=&force=undefined'
        }
        const token = 'wefwdhcjshfbcadhfj'
        localStorage.setItem('userInfo', JSON.stringify(userInfo))
        localStorage.setItem('token', token)
        // 成功了从哪来到哪去
        console.log(this)

        if (this.$route.query.from) {
          this.$router.push(this.$route.query.from)
        } else {
          (
            this.$router.push('/home')
          )
        }
      })
    }
  },
  components: {
    mytop
  }
}
</script>

<style lang="scss" scoped>
.warp {
  margin-top: 46px;
  margin-bottom: 50px;
}
.logo {
  width: 320px;
  height: 134px;
  display: block;
  margin: 50px auto;
  background-color: pink;
}

.input-content {
  padding: 0 38px;
}
.input-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 30px;
  background: #f8f6fc;
  height: 120px;
  border-radius: 4px;
  &:last-child {
    margin-bottom: 0;
  }
  .part {
    display: flex;
    align-items: center;
  }
  .tit {
    height: 50px;
    line-height: 56px;
    font-size: 16px;
    color: pink;
    input {
      height: 60px;
      font-size: 16px;
      color: #333;
      width: 100%;
    }
  }
  .button-group {
    padding: 40px 0;
  }
}
.confirm-btn {
  height: 88px;
  display: block;
  line-height: 88px;
  border-radius: 16px;
  margin: 20px 38px;
  background: linear-gradient(to right, #ecd7ac, #cba169);
  color: #fff;
  font-size: 38px;
}
</style>
